{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="Cache-Control" content="max-age=7200" />
    <meta name="keywords" content="mrdoc,markdown,文档写作,在线教程"/>
    <meta name="description" content="MrDoc是由州的先生（zmister.com）开发的，基于Python的Django框架的在线MarkDown文档写作系统。" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>MrDoc - 一个简单的文档写作系统</title>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
    <link href="{% static 'mrdoc.css' %}?version={{mrdoc_version}}" rel="stylesheet">
    <link rel="icon" href="{% static 'favicon_16.png' %}"/>
</head>
<body class="layui-container">
<!-- 页头 -->
{% include 'app_doc/head_base.html' %}
<!-- 页头结束 -->

<!-- 主体 -->
<div class="layui-container project-list-content" style="display:flex;flex-wrap:wrap;">
    <!-- 遍历文集列表 -->
    {% load project_filter %}
    {% for p in project_list %}
        <div class="project-item layui-col-md3 layui-col-xs12">
            <a href="{% url 'pro_index' p.id %}" title="{{p.name}}">
                <div class="layui-card">
                    <div class="layui-card-header" style="overflow:hidden;white-space: nowrap;text-overflow: ellipsis;">
                        {% if p.role == 1 %}
                        <strong><i class="layui-icon layui-icon-password"></i> {{ p.name }}</strong>
                        {% elif p.role == 2 %}
                        <strong><i class="layui-icon layui-icon-user"></i> {{ p.name }}</strong>
                        {% elif p.role == 3 %}
                        <strong><i class="layui-icon layui-icon-key"></i> {{ p.name }}</strong>
                        {% else %}
                            <strong>{{ p.name }}</strong>
                        {% endif %}

                    </div>
                  <div class="layui-card-body">
                      <p>作者：{{p.create_user}}</p>
                      <p>最新：<u>{{p.id | get_new_doc}}</u></p>
                      <p class="tooltip">简介：
                          {% if p.intro == "" %}
                          <span class="">此文集没有填写简介</span>
                          {% else %}
                          <span class="">{{ p.intro | slice:'30' }}…</span>
                          <span class="tooltip-content clearfix">{{ p.intro }}</span>
                          {% endif %}
                      </p>
                      <p></p>
                  </div>
                </div>
            </a>
        </div>
    {% endfor %}
</div>
<!-- 主体结束 -->

<!-- 页脚 -->
{% include 'app_doc/foot_base.html' %}
<!-- 页脚结束 -->

<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'layui/layui.all.js' %}"></script>
{% block custom_script %}
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        var layer = layui.layer;
        //创建新文集
        createPro = function () {
            layer.open({
                type:1,
                title:'新建文集',
                area:'300px;',
                id:'createPro',//配置ID
                content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required  lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介" class="layui-textarea"></textarea></div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    data = {
                        'pname':$("#pname").val(),
                        'desc':$("#desc").val(),
                    }
                    $.post("{% url 'create_project' %}",data,function(r){
                        if(r.status){
                            //创建成功，刷新页面
                            window.location.reload();
                        }else{
                            //创建失败，提示
                            console.log(r)

                        }
                    })
                },
            });
        };
        //修改文集
        modifyPro = function(pro_id){
            layer.open({
                type:1,
                title:'修改文集',
                area:'300px;',
                id:'createPro',//配置ID
                content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required  lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介" class="layui-textarea"></textarea></div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    data = {
                        'pro_id':pro_id,
                        'name':$("#pname").val(),
                        'desc':$("#desc").val(),
                    }
                    $.post("{% url 'modify_project' %}",data,function(r){
                        if(r.status){
                            //修改成功，刷新页面
                            window.location.reload();
                        }else{
                            //修改失败，提示
                            console.log(r)
                        }
                    })
                },
            });
        };
        //修改用户密码
        changePwd = function(uid,username){
            layer.open({
                type:1,
                title:'修改密码',
                area:'300px;',
                id:'changePwd',
                content:'<div style="padding:10px 0 0 20px;">修改用户[' + username + ']的密码：</div><div style="padding: 20px;"><input class="layui-input" type="password" id="newPwd1" style="margin-bottom:10px;" placeholder="输入新密码" required  lay-verify="required"><input class="layui-input" type="password" id="newPwd2" placeholder="再次确认新密码" required  lay-verify="required"></div>',
                btn:['确认修改','取消'],
                yes:function (index,layero) {
                    data = {
                        'password':$("#newPwd1").val(),
                        'password2':$("#newPwd2").val(),
                    }
                    $.post("{% url 'modify_pwd' %}",data,function(r){
                        if(r.status){
                            //修改成功
                            window.location.reload();
                            //layer.close(index)
                        }else{
                            //修改失败，提示
                            //console.log(r)
                            layer.msg(r.data)
                        }
                    })
                },
            })
        };
    </script>
    <!-- 统计代码开始 -->
        {% if debug %}
        {% else %}
            {{ static_code | safe }}
        {% endif %}
    <!-- 统计代码结束 -->
    <script>
        $(window).bind("load", function() {
            var footerHeight = 0;
            var footerTop = 0;
            positionFooter();
            function positionFooter() {
                // 获取页脚的高度
                footerHeight = $(".layui-footer").height();
                // 获取页脚的高度
                /*
                    scrollTop() 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
                */
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight-40)+"px";
                console.log(footerHeight)
                console.log(footerTop)
                console.log($(".layui-header").height()+$(".layui-container").height())
                console.log($(window).height())
                //如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
                if(($(".layui-header").height()+$(".project-list-content").height()) < $(window).height()) {
                    console.log("页脚置底")
                    $(".layui-footer").css({ position: "absolute",left:"0" }).stop().css({top:footerTop});
                }
            }
            //$(window).scroll(positionFooter).resize(positionFooter);
        });
    </script>
{% endblock %}
</body>
</html>